<script setup>
import { ref, onMounted } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'

// 定义props
const props = defineProps({
  // 日历事件数据
  events: {
    type: Array,
    default: () => []
  },
  // 初始化视图
  initialView: {
    type: String,
    default: 'dayGridMonth'
  },
  // 是否显示周末
  weekends: {
    type: Boolean,
    default: true
  },
  // 是否可编辑
  editable: {
    type: Boolean,
    default: true
  },
  // 是否可选择日期
  selectable: {
    type: Boolean,
    default: true
  },
  // 自定义头部工具栏
  headerToolbar: {
    type: Object,
    default: () => ({
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    })
  }
})

// 定义事件
const emit = defineEmits([
  'dateClick',
  'eventClick',
  'eventsSet',
  'select'
])

// 日历实例引用
const calendarRef = ref(null)

// 配置汉化选项
const calendarOptions = ref({
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
  initialView: props.initialView,
  locale: 'zh-cn', // 设置语言为中文
  events: props.events,
  editable: props.editable,
  selectable: props.selectable,
  weekends: props.weekends,
  headerToolbar: props.headerToolbar,
  buttonText: {
    today: '今天',
    month: '月',
    week: '周',
    day: '日',
    list: '列表'
  },
  allDayText: '全天',
  eventTimeFormat: { // 事件时间格式
    hour: '2-digit',
    minute: '2-digit',
    meridiem: false,
    hour12: false
  },
  // 一周从周一开始
  firstDay: 1,
  // 工作日翻译
  dayHeaderFormat: {
    weekday: 'short',
    omitCommas: true
  },
  // 月份和日期格式化
  titleFormat: {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  },
  // 事件回调
  dateClick: (arg) => {
    emit('dateClick', arg)
  },
  eventClick: (arg) => {
    emit('eventClick', arg)
  },
  eventsSet: (arg) => {
    emit('eventsSet', arg)
  },
  select: (arg) => {
    emit('select', arg)
  }
})

// 提供给父组件的方法
const getApi = () => {
  return calendarRef.value.getApi()
}

// 暴露方法给父组件
defineExpose({
  getApi
})
</script>

<template>
  <FullCalendar 
    ref="calendarRef"
    :options="calendarOptions"
    class="calendar-container"
  />
</template>

<style scoped>
.calendar-container {
  width: 100%;
  height: 100%;
  min-height: 600px;
}

:deep(.fc-button-primary) {
  background-color: #409EFF;
  border-color: #409EFF;
}

:deep(.fc-button-primary:not(:disabled):active),
:deep(.fc-button-primary:not(:disabled).fc-button-active) {
  background-color: #337ECC;
  border-color: #337ECC;
}

:deep(.fc-daygrid-day.fc-day-today) {
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.fc-event) {
  cursor: pointer;
}
</style>